import React from 'react';
import { useDrag } from 'react-dnd'

const list = [{
    componentType: 'block',
    name: 'Color',
    data: {
      background: 'pink',
      text: '纯色组件'
    },
    rect: {
        width: 100,
        height: 100,
    }
},
{
  componentType: 'block',
  name: 'Image',
  data: {
      text: '图片组件',
      img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  },
  rect: {
      width: 100,
      height: 100,
  }
},
{
  componentType: 'block',
  name: 'Carousel',
  data: {
      text: '走马灯'
  },
  rect: {
      width: '100%',
      height: 160,
  }
}
]

const DragComponent = (props) => {
  const { item } = props;
  const [{handlerId}, drag] = useDrag(() => ({
    type: "component",
    item,
    options: {
      // dropEffect: copy ? 'copy' : 'move',
    },
    collect: (monitor) => {
      return ({
        // isDragging: monitor.isDragging(),
        handlerId: monitor.getHandlerId(),
      })
    },
  }));
  return <div style={{height: 20, width: 100, border: '1px solid #ccc'}} data-handler-id={handlerId} ref={drag}>{item.name}</div>
}

export default function ComponentList () {
    return <>{list.map(item => {
      return (
        <div style={{padding: 10}}>
          <DragComponent item={item} />
        </div>
      )
    }
    )}</>
}